*
  padding 0
  margin 0

*
  -webkit-touch-callout none!important  /*系统默认菜单被禁用*/   
  -webkit-user-select text!important /*webkit浏览器*/   
  -khtml-user-select text!important /*早期浏览器*/   
  -moz-user-select text!important/*火狐*/   
  -ms-user-select text!important /*IE10*/   
  user-select text!important   

input
  -webkit-user-select auto!important

body
  font-size 16px!important

html, body
  width 100%
  height 100%


.ellipsis
  overflow hidden
  white-space nowrap
  text-overflow ellipsis
  width 100%


.flexbox
  display flex


.flexitem
  flex 1


.flex-center
  display flex
  justify-content center
  align-items center


.fb-4
  flex-basis 25%


.row
  flex-direction row


.column
  flex-direction column


.wrap
  flex-wrap wrap


.nowrap
  flex-wrap nowrap


.justify-center
  justify-content center


.justify-around
  justify-content space-around


.justify-between
  justify-content space-between
  
.justify-end
  justify-content flex-end

.justify-start
  justify-content flex-start


.align-center
  align-items center


.align-start
  align-items flex-start


.align-end
  align-items flex-end


.fill-width
  width 100%


.fill-height
  height 100%


.text-center
  text-align center


.text-left
  text-align left


.text-right
  text-align right


.title-color
  color #787878


.card
  border-radius 8px
  background white


.cube-tab-bar
  background white

 
.search-input .cube-input-field
  padding 4px 6px!important
  background white

.svg-icon
  width 24px
  height 24px

.chat-bubble
  width 100%
  height auto
  display flex
  justify-content flex-start
  align-items flex-start
  padding 12px 8px
  box-sizing: border-box;
  .head-url
    flex-basis 12% 
    width 12% 
    position relative
    top 2px
    // top 24px
    img 
      width 90%
      height 90%
      border-radius 8px
      border 1px solid #fcfcfc
  .content
    flex-basis 88% 
    width 88% 
    display flex
    flex-wrap wrap
    padding 4px 10px

    .user-info 
      display flex
      justify-content flex-start
      align-items center
      padding-bottom 4px
      padding-left 4px
      flex-basis 100%
      width 100%
      .user-level
        padding 2px 4px
        color white
        border-radius 2px
        font-size 11px
        flex-basis 18%
        width 18% 
      .username
        color #898988
        margin-left 6px
        font-size 11px
        line-height 16px
        line-height 16px
        text-align left
    .bubble
      padding 6px 8px
      color #282828
      background #fff
      border-radius 4px
      position relative
      width auto
      max-width 420px
      min-width 80px
      min-height 24px
      line-height 24px
      margin 0 8px 0 5px
      text-align left
      box-shadow 0.1px 0.1px 0.5px 0.5px #d9d9d9
      &.text 
        min-width 36px
      &:before
        content ""
        border-style solid
        border-width 0 10px 10px 0
        border-color transparent #fff transparent transparent
        position absolute
        top 10px
        left -4px
        transform rotateZ(225deg)

  &.self
    flex-direction row-reverse
    justify-content flex-end
    .content 
      justify-content flex-end
    .head-url
      top 2px
    .user-info
      justify-content flex-end
      .username
        margin-left 8px
        margin-right 16px
    .bubble 
      background rgb(171, 232, 125)
      color #282828
      &:after
        content ""
        border-style solid
        position absolute
        right -4px
        top 12px
        border-width 10px 0 0 10px
        border-color transparent transparent transparent rgb(171, 232, 125)
        transform rotateZ(225deg)
      &:before
        content ""
        border-style solid
        border-width 0
        border-color transparent transparent transparent transparent
        position absolute

.bubble.packet-wrapper:before
  border-color transparent #2196F3 transparent transparent!important

.group-list-item
  width 100%
  height 64px
  display flex
  justify-content space-between
  align-items center
  background #fff
  // border-top 1px solid #eaeaea
  // border-bottom 1px solid #eaeaea
  &.is-top
    background #f1f1f1
  .icon
    flex-basis 16%
    width 16%
    position relative
    img
      width 42px
      height 42px
      border-radius 8px
    .count
      width 17px
      height 17px
      line-height 17px
      padding-top 1px
      box-sizing border-box
      border-radius 50%
      background-color #f44336
      position absolute
      top -4px
      right 2px
      color white
      font-size 10px
      line-height 16px
  .info
    flex-basis 64%
    width 64%
    height 100%
    padding 12px 4px
    box-sizing border-box
    border-bottom 0.1px solid #f1f1f1
    .title
      text-align left
      font-size 16px
      color black
      font-weight 400
    .content
      text-align left 
      font-size 11px
      height 15px
      line-height 15px
      color #898989
      margin-top 6px
  .desc
    flex-basis 20%
    width 20%
    height 100%
    padding 12px 4px
    box-sizing border-box
    border-bottom 0.1px solid #f1f1f1
    .time
      font-size 11px
      color #898989

// 群主
.user-level-400
  background rgb(234,195,76)
// 成员
.user-level-200
  background rgb(154,197,245)
// 管理员
.user-level-300
  background rgb(135,215,176)


.chatpanel-container
  width 100%
  height 100%
  overflow-x hidden
  overflow-y auto
  position relative
  background #f1f1f1
  position relative
  .group-info
    display flex
    justify-content space-between
    align-items center
    height 44px
    padding 4px 16px
    box-sizing border-box
    position fixed
    top 0
    left 0
    width 100%
    background white
    z-index 999
    span 
      display inline-block
      margin-left 12px
    .info
      display flex
      justify-content center
      align-items center
      position relative
      bottom 3px
      .group-name
        margin-left 16px
    .setting
      margin-top 0
  .group-list-wrapper
    background #efefef
    // position fixed
    // top 42px
    // left 0
    // bottom 50px
    width 100%
    height calc(100% - 1.2rem)
    overflow-x hidden
    overflow-y auto
    transition all 0.1s 0.01s ease
    &.show-tool
      position relative
      // top auto!important
      // bottom 240px!important
      // height calc(100% - 282px)!important
    .group-list
      .list-item
        display flex
        justify-content space-between
        align-items center
        backgr  width 100% 
  height 100%ound #fff
        &.top
          background #ddd
        .icon
          flex-basis 20%
          width 20%
          position relative
          img
            width 40px
            height 40px
            border-radius 8px
          .count
            width 17px
            height 17px
            border-radius 50%
            background-color #f44336
            position absolute
            top 0
            left 0
            color white
        .info
          flex-basis 70%
          width 70%
        .desc
          flex-basis 10%
          width 10%
  .chat-input-board 
    width 100%
    height 36px

.top-fixed-card
  position absolute
  top 44px
  left 0
  width 100%
  height 44px
  z-index 10

.send-button
  width 60px
  height 28px
  line-height 28px
  font-size 14px
  background rgb(87, 188, 109)
  border-radius 4px
  color white

.chat-board
  width 100%
  height 200px
  padding 4px 6px
  box-sizing border-box
  background #f3f3f3
  position relative
  transition all 0.1s 0.01s ease
  .shutup-panel 
    position absolute
    width 100%
    height 100%
    top 0
    left 0
    background rgba(0,0,0,0.1)
  &.show-tool
    position relative
  .input-box 
    display flex
    justify-content space-between
    align-items center
    width 100%
    .input
      flex-basis 62%
      width 62%
    .send
      flex-basis 12%
      width 12%
      text-align center
      button 
        padding 12px 2px
        font-size 14px
        color white
        background #57bc6d
    .send-1
      flex-basis 14%
      width 14%
  .tool-box 
    width 100%
    height 66%
    padding 2% 0
    .tool-wrapper
      width 100%
    .tool-list 
      display flex 
      justify-content flex-start
      align-items flex-start
      padding 8px
      padding-top 20px
      .list-item
        margin-right 8px
        flex-basis 24%
        height 72px
        border-radius 8px
        background white
        display flex 
        flex-direction column
        justify-content space-between
        align-items center
        position relative
        font-size 13px
        box-sizing border-box
        padding 12px 6px
        .item-image
          width 44%
          // height 40px
          margin-bottom 4px
.sound-input
  // border 1px solid #909090
  background white
  border-radius 2px
  height 36px
  line-height 36px
  color #343434
  box-sizing border-box 
  user-select none
  position relative
  -moz-user-select none!important
  -o-user-select none!important
  -khtml-user-select none!important
  -webkit-user-select none!important
  -ms-user-select none!important
  user-select none!important
  .mask
    position absolute
    width 100%
    height 100% 
    left 0 
    top 0 
    z-index 999
  span 
    -moz-user-select none!important
    -o-user-select none!important
    -khtml-user-select none!important
    -webkit-user-select none!important
    -ms-user-select none!important
    user-select none!important

.sound-popup 
  position fixed
  height 150px
  width 150px
  left calc(50% - 60px)
  top 20%
  background rgba(0, 0, 0, 0.2)
  border-radius 8px
  z-index 9998
#msg-input
  height 36px
  width 100% 
  padding-left 12px
  box-sizing border-box
.file-input
  position absolute
  width 100%
  height 100%
  top 0
  left 0
  opacity 0

.emoji.svg-icon
  height 28px
  width 28px

.recorder-image
  height 100px
  width 100px

.face-list
  display flex
  justify-content flex-start
  align-items flex-start
  flex-wrap wrap
  width 100%
  height 100%
  padding-left 12px
  .face
    width 26px
    height 26px
    padding 3px
    margin 8px
    img
      width 100%
      height 100%

.helper-list
  display flex
  flex-wrap wrap
  li 
    width 49%
    flex-basis 49%
    border 1px solid #dedede
    height 64px
    line-height 64px


.search-input
  border-radius 6px
  padding 6px
  height 24px

.svg-icon
  width 24px
  height 24px

.backbar 
  width 100%
  height 44px
  line-height 44px
  background white
  display flex 
  justify-content flex-start 
  align-items center
  padding-left 12px
  box-sizing border-box
  .back 
    display flex 
    justify-content center 
    align-items center
  span 
    position relative
    display inline-block 
    margin-left 12px

.table
  width 100%
  thead
    tr
      border-bottom 1px solid #cdcdcd
      th
        font-size 1rem
        color #787878
        text-align center
        padding 8px
      
  tbody
    tr
      border-bottom 1px solid #cdcdcd
      td
        text-align center
        font-size 1rem
        padding 12px
      
.cube-input-clear
  height 1.4em
  padding 12px
  .cubeic-wrong
    font-size 20px

.add-group-wrapper
  width 100% 
  height 100%
  position absolute
  bottom 2000px
  left 0
  opacity 0
  transition opacity 0.5s 0s ease
  &.show 
    top 0
    opacity 1

.fa-lgl
  font-size 28px!important
  position relative
  bottom 2px

.add-group
  .cube-input-field
    background #f1f1f1
  .input 
    padding 12px 8px

.white-input
  .cube-input-field
    background #fff

// 系统消息名称em
.emp-name
  color #2069d9


.chat-card
  width 72%
  height 100%
  display flex
  justify-content flex-end
  align-items center
  background #fff
  // border-top 1px solid #eaeaea
  // border-bottom 1px solid #eaeaea
  box-sizing border-box
  position relative
  .icon
    flex-basis 16%
    width 16%
    right -22px
    position relative
    img 
      width 26px
      height 26px 
      border-radius 2px
      border 1px solid #909090
  .info
    flex-basis 70%
    width 70%
    display flex 
    justify-content flex-start
    padding-top 6px
    i.fa 
      top 4px
    .title 
      font-size 15px
    .content 
      font-size 13px
      color #909090


.my-dot
  width 4px
  height 4px
  border-radius 50%
  background #d2d2d2
  &.active
    background #a0a0a0
    width 5px
    height 5px
.photo-tool
  img
    width 55%
.tool-image
  margin-bottom 0

.cube-input_active::after
  border-color transparent

.cube-dialog, .cube-toast
  z-index 9999!important

.chatpanel 
  position fixed 
  bottom 0 
  left 0
  width 100%
  height calc(100% - 36px)
  transition all 0.1s 0.01s ease

// 纯字母数字不换行
.msg-text
  word-break break-all
  word-wrap break-word